<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行业务系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #e6f2ff, #c8e0ff);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 450px;
            background: #f0f7ff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(52, 152, 219, 0.2);
            position: relative;
            z-index: 1;
        }

        .header-decoration {
            background: linear-gradient(to right, #3498db, #2980b9);
            height: 10px;
            position: relative;
        }

        .header-decoration::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, #2980b9, #2c7bad);
        }

        .system-title {
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            text-align: center;
            padding: 15px;
        }

        .system-title h1 {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .form-container {
            padding: 30px;
        }

        .form-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .form-header h2 {
            color: #2c3e50;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }

        .input-with-icon {
            position: relative;
        }

        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #3498db;
            font-size: 16px;
        }

        .form-group input {
            width: 100%;
            padding: 14px 14px 14px 45px;
            border: 2px solid #d1d9e6;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s;
            outline: none;
            color: #2c3e50;
        }

        .form-group input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .required::after {
            content: " *";
            color: #e74c3c;
        }

        .password-requirements {
            font-size: 13px;
            color: #7f8c8d;
            margin-top: 8px;
            display: block;
            font-style: italic;
        }

        .btn-primary {
            display: block;
            width: 100%;
            padding: 14px;
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
            letter-spacing: 1px;
            margin-top: 10px;
        }

        .btn-primary:hover {
            background: linear-gradient(to right, #2980b9, #2c7bad);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(41, 128, 185, 0.1);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-secondary {
            display: inline-block;
            padding: 8px 15px;
            background-color: #ecf0f1;
            color: #3498db;
            border: 1px solid #3498db;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            text-align: center;
        }

        .btn-secondary:hover {
            background-color: #e0e7eb;
        }

        .form-links {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }

        .form-links a {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
        }

        .form-links a:hover {
            text-decoration: underline;
        }

        .security-note {
            text-align: center;
            margin-top: 25px;
            color: #7f8c8d;
            font-size: 13px;
            font-style: italic;
            border-top: 1px solid #e0e7eb;
            padding-top: 15px;
        }

        .decoration-circle {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(52, 152, 219, 0.1);
            z-index: -1;
        }

        .circle-1 {
            top: 10%;
            left: 10%;
        }

        .circle-2 {
            bottom: 10%;
            right: 10%;
            width: 150px;
            height: 150px;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
            visibility: hidden;
        }

        .loading.show {
            visibility: visible;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .error-message {
            color: #e74c3c;
            font-size: 13px;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .verification-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #e0e7eb;
        }

        .verification-info h3 {
            color: #3498db;
            font-size: 16px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 背景装饰 -->
    <div class="decoration-circle circle-1"></div>
    <div class="decoration-circle circle-2"></div>

    <!-- 登录页面 -->
    <div id="login-page" class="container">
        <div class="header-decoration"></div>
        <div class="system-title">
            <h1>银行业务系统</h1>
        </div>
        <div class="form-container">
            <div class="form-header">
                <h2>请登录您的银行账户</h2>
            </div>
            <div class="form-group">
                <label for="login-account">账号</label>
                <div class="input-with-icon">
                    <i class="fas fa-user"></i>
                    <input type="text" id="login-account" placeholder="手机号/银行卡号/身份证号">
                </div>
                <p class="error-message" id="login-account-error"></p>
            </div>
            <div class="form-group">
                <label for="login-password">密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="login-password" placeholder="请输入您的密码">
                </div>
                <p class="password-requirements">密码必须包含8位以上，由数字和字母组成</p>
                <p class="error-message" id="login-password-error"></p>
            </div>
            <div class="form-group">
                <label for="login-type">请选择登录类型</label>
                <select id="login-type">
                    <option value="customer">客户登录</option>
                    <option value="admin">管理员登录</option>
                </select>
            </div>
            <button id="login-btn" class="btn-primary">登录账户</button>
            <div class="form-links">
                <a href="#" id="to-register">新用户注册</a> |
                <a href="#" id="to-forgot-password">忘记密码</a>
            </div>
            <div class="security-note">
                <p>为保障您的账户安全，请勿向他人透露您的密码</p>
            </div>
        </div>
    </div>

    <!-- 注册页面 -->
    <div id="register-page" class="container" style="display: none;">
        <div class="header-decoration"></div>

        <div class="system-title">
            <h1>银行业务系统</h1>
        </div>

        <div class="form-container">
            <div class="form-header">
                <h2>用户注册</h2>
                <p>请填写以下信息完成注册</p>
            </div>

            <div class="form-group">
                <label for="customer-id">客户编号</label>
                <div class="input-with-icon">
                    <i class="fas fa-hashtag"></i>
                    <input type="text" id="customer-id" placeholder="自动生成" readonly>
                </div>
            </div>

            <div class="form-group">
                <label for="register-name" class="required">客户姓名</label>
                <div class="input-with-icon">
                    <i class="fas fa-user"></i>
                    <input type="text" id="register-name" placeholder="请输入客户姓名">
                </div>
                <p class="error-message" id="register-name-error"></p>
            </div>

            <div class="form-group">
                <label for="register-id-card" class="required">身份证号</label>
                <div class="input-with-icon">
                    <i class="fas fa-id-card"></i>
                    <input type="text" id="register-id-card" placeholder="请输入身份证号">
                </div>
                <p class="error-message" id="register-id-card-error"></p>
            </div>

            <div class="form-group">
                <label for="register-phone" class="required">联系电话</label>
                <div class="input-with-icon">
                    <i class="fas fa-phone"></i>
                    <input type="text" id="register-phone" placeholder="请输入联系电话">
                </div>
                <p class="error-message" id="register-phone-error"></p>
            </div>

            <div class="form-group">
                <label for="register-address">联系地址</label>
                <div class="input-with-icon">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="text" id="register-address" placeholder="请输入联系地址（可选）">
                </div>
            </div>

            <div class="form-group">
                <label for="register-password" class="required">设置密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="register-password" placeholder="请设置密码">
                </div>
                <p class="password-requirements">密码必须包含8位以上，由数字和字母组成</p>
                <p class="error-message" id="register-password-error"></p>
            </div>

            <div class="form-group">
                <label for="register-password-confirm" class="required">确认密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="register-password-confirm" placeholder="请确认密码">
                </div>
                <p class="error-message" id="register-password-confirm-error"></p>
            </div>

            <button id="register-btn" class="btn-primary">注册账户</button>

            <div class="form-links">
                <a href="#" id="to-login-from-register">已有账户，去登录</a>
            </div>
        </div>
    </div>

    <!-- 忘记密码页面 -->
    <div id="forgot-password-page" class="container" style="display: none;">
        <div class="header-decoration"></div>

        <div class="system-title">
            <h1>银行业务系统</h1>
        </div>

        <div class="form-container">
            <div class="form-header">
                <h2>重置密码</h2>
                <p>请验证您的身份信息</p>
            </div>

            <div class="verification-info">
                <h3>身份验证</h3>
                <div class="form-group">
                    <label for="forgot-id-card" class="required">身份证号</label>
                    <div class="input-with-icon">
                        <i class="fas fa-id-card"></i>
                        <input type="text" id="forgot-id-card" placeholder="请输入身份证号">
                    </div>
                    <p class="error-message" id="forgot-id-card-error"></p>
                </div>

                <div class="form-group">
                    <label for="forgot-name" class="required">姓名</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <input type="text" id="forgot-name" placeholder="请输入姓名">
                    </div>
                    <p class="error-message" id="forgot-name-error"></p>
                </div>

                <div class="form-group">
                    <label for="forgot-phone" class="required">联系电话</label>
                    <div class="input-with-icon">
                        <i class="fas fa-phone"></i>
                        <input type="text" id="forgot-phone" placeholder="请输入联系电话">
                    </div>
                    <p class="error-message" id="forgot-phone-error"></p>
                </div>

                <button id="verify-identity-btn" class="btn-primary">验证身份</button>
            </div>

            <div class="form-group" id="new-password-group" style="display: none;">
                <label for="forgot-new-password">新密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="forgot-new-password" placeholder="请设置新密码">
                </div>
                <p class="password-requirements">密码必须包含8位以上，由数字和字母组成</p>
                <p class="error-message" id="forgot-new-password-error"></p>
            </div>

            <div class="form-group" id="confirm-password-group" style="display: none;">
                <label for="forgot-confirm-password">确认新密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="forgot-confirm-password" placeholder="请确认新密码">
                </div>
                <p class="error-message" id="forgot-confirm-password-error"></p>
            </div>

            <button id="reset-password-btn" class="btn-primary" style="display: none;">重置密码</button>

            <div class="form-links">
                <a href="#" id="to-login-from-forgot">返回登录</a>
            </div>
        </div>
    </div>

    <!-- 修改密码页面 -->
    <div id="change-password-page" class="container" style="display: none;">
        <div class="header-decoration"></div>

        <div class="system-title">
            <h1>银行业务系统</h1>
        </div>

        <div class="form-container">
            <div class="form-header">
                <h2>修改密码</h2>
                <p>请输入旧密码和新密码</p>
            </div>

            <div class="form-group">
                <label for="old-password">旧密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="old-password" placeholder="请输入旧密码">
                </div>
                <p class="error-message" id="old-password-error"></p>
            </div>

            <div class="form-group">
                <label for="new-password">新密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="new-password" placeholder="请设置新密码">
                </div>
                <p class="password-requirements">密码必须包含8位以上，由数字和字母组成</p>
                <p class="error-message" id="new-password-error"></p>
            </div>

            <div class="form-group">
                <label for="new-password-confirm">确认新密码</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="new-password-confirm" placeholder="请确认新密码">
                </div>
                <p class="error-message" id="new-password-confirm-error"></p>
            </div>

            <button id="change-password-btn" class="btn-primary">修改密码</button>

            <div class="form-links">
                <a href="#" id="to-login-from-change">返回登录</a>
            </div>
        </div>
    </div>

     <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟用户数据库，添加一个管理员账号
            const users = {
                // 客户账号
                '13800138000': {
                    password: 'Test1234',
                    name: '张三',
                    idCard: '110101199001011234',
                    phone: '13800138000',
                    address: '北京市朝阳区',
                    customerId: 'C0001',
                    lockedUntil: 0,
                    loginAttempts: 0
                },
                '6222021234567890123': {
                    password: 'Bank5678',
                    name: '李四',
                    idCard: '310101199001015678',
                    phone: '13900139000',
                    address: '上海市浦东新区',
                    customerId: 'C0002',
                    lockedUntil: 0,
                    loginAttempts: 0
                },
                '110101199001011234': {
                    password: 'Secure9012',
                    name: '王五',
                    idCard: '110101199001011234',
                    phone: '13700137000',
                    address: '',
                    customerId: 'C0003',
                    lockedUntil: 0,
                    loginAttempts: 0
                },
                // 管理员账号
                'admin': {
                    password: 'Admin1234',
                    name: '系统管理员',
                    idCard: '000000000000000000',
                    phone: '13000000000',
                    address: '系统管理中心',
                    customerId: 'A0001',
                    lockedUntil: 0,
                    loginAttempts: 0,
                    isAdmin: true
                }
            };

            // 客户编号计数器
            let customerIdCounter = 3;

            // DOM元素
            const loginPage = document.getElementById('login-page');
            const registerPage = document.getElementById('register-page');
            const forgotPasswordPage = document.getElementById('forgot-password-page');
            const changePasswordPage = document.getElementById('change-password-page');
            const bankingSystem = document.getElementById('banking-system');

            // 登录表单元素
            const loginAccount = document.getElementById('login-account');
            const loginPassword = document.getElementById('login-password');
            const loginBtn = document.getElementById('login-btn');
            const loginType = document.getElementById('login-type'); // 新增：获取登录类型下拉菜单

            // 注册表单元素
            const customerId = document.getElementById('customer-id');
            const registerName = document.getElementById('register-name');
            const registerIdCard = document.getElementById('register-id-card');
            const registerPhone = document.getElementById('register-phone');
            const registerAddress = document.getElementById('register-address');
            const registerPassword = document.getElementById('register-password');
            const registerPasswordConfirm = document.getElementById('register-password-confirm');
            const registerBtn = document.getElementById('register-btn');

            // 忘记密码表单元素
            const forgotIdCard = document.getElementById('forgot-id-card');
            const forgotName = document.getElementById('forgot-name');
            const forgotPhone = document.getElementById('forgot-phone');
            const verifyIdentityBtn = document.getElementById('verify-identity-btn');
            const newPasswordGroup = document.getElementById('new-password-group');
            const confirmPasswordGroup = document.getElementById('confirm-password-group');
            const forgotNewPassword = document.getElementById('forgot-new-password');
            const forgotConfirmPassword = document.getElementById('forgot-confirm-password');
            const resetPasswordBtn = document.getElementById('reset-password-btn');

            // 修改密码表单元素
            const oldPassword = document.getElementById('old-password');
            const newPassword = document.getElementById('new-password');
            const newPasswordConfirm = document.getElementById('new-password-confirm');
            const changePasswordBtn = document.getElementById('change-password-btn');

            // 导航按钮
            const toRegister = document.getElementById('to-register');
            const toForgotPassword = document.getElementById('to-forgot-password');
            const toLoginFromRegister = document.getElementById('to-login-from-register');
            const toLoginFromForgot = document.getElementById('to-login-from-forgot');
            const toLoginFromChange = document.getElementById('to-login-from-change');
            const logoutBtn = document.getElementById('logout-btn');
            const toChangePassword = document.getElementById('to-change-password');

            // 用户名显示
            const welcomeUsername = document.getElementById('welcome-username');

            // 页面切换函数
            function showPage(pageId) {
                // 隐藏所有页面
                document.querySelectorAll('.container').forEach(page => {
                    page.style.display = 'none';
                });

                // 显示指定页面
                document.getElementById(pageId).style.display = 'block';
            }

            // 生成客户编号
            function generateCustomerId() {
                customerIdCounter++;
                return `C${customerIdCounter.toString().padStart(4, '0')}`;
            }

            // 表单验证函数
            function validateLoginForm() {
                let isValid = true;

                // 重置错误消息
                document.querySelectorAll('#login-page .error-message').forEach(el => {
                    el.classList.remove('show');
                    el.textContent = '';
                });

                if (!loginAccount.value.trim()) {
                    document.getElementById('login-account-error').textContent = '账号不能为空';
                    document.getElementById('login-account-error').classList.add('show');
                    isValid = false;
                }

                if (!loginPassword.value.trim()) {
                    document.getElementById('login-password-error').textContent = '密码不能为空';
                    document.getElementById('login-password-error').classList.add('show');
                    isValid = false;
                }

                return isValid;
            }

            function validateRegisterForm() {
                let isValid = true;

                // 重置错误消息
                document.querySelectorAll('#register-page .error-message').forEach(el => {
                    el.classList.remove('show');
                    el.textContent = '';
                });

                if (!registerName.value.trim()) {
                    document.getElementById('register-name-error').textContent = '客户姓名不能为空';
                    document.getElementById('register-name-error').classList.add('show');
                    isValid = false;
                }

                if (!registerIdCard.value.trim()) {
                    document.getElementById('register-id-card-error').textContent = '身份证号不能为空';
                    document.getElementById('register-id-card-error').classList.add('show');
                    isValid = false;
                } else if (!/^\d{17}[\dXx]$/.test(registerIdCard.value.trim())) {
                    document.getElementById('register-id-card-error').textContent = '请输入有效的18位身份证号';
                    document.getElementById('register-id-card-error').classList.add('show');
                    isValid = false;
                } else if (Object.values(users).some(user => user.idCard === registerIdCard.value.trim())) {
                    document.getElementById('register-id-card-error').textContent = '该身份证号已被注册';
                    document.getElementById('register-id-card-error').classList.add('show');
                    isValid = false;
                }

                if (!registerPhone.value.trim()) {
                    document.getElementById('register-phone-error').textContent = '联系电话不能为空';
                    document.getElementById('register-phone-error').classList.add('show');
                    isValid = false;
                } else if (!/^1[3-9]\d{9}$/.test(registerPhone.value.trim())) {
                    document.getElementById('register-phone-error').textContent = '请输入有效的11位手机号码';
                    document.getElementById('register-phone-error').classList.add('show');
                    isValid = false;
                } else if (Object.values(users).some(user => user.phone === registerPhone.value.trim())) {
                    document.getElementById('register-phone-error').textContent = '该手机号码已被注册';
                    document.getElementById('register-phone-error').classList.add('show');
                    isValid = false;
                }

                if (!registerPassword.value.trim()) {
                    document.getElementById('register-password-error').textContent = '密码不能为空';
                    document.getElementById('register-password-error').classList.add('show');
                    isValid = false;
                } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(registerPassword.value.trim())) {
                    document.getElementById('register-password-error').textContent = '密码必须包含8位以上，由数字和字母组成';
                    document.getElementById('register-password-error').classList.add('show');
                    isValid = false;
                }

                if (registerPassword.value.trim() !== registerPasswordConfirm.value.trim()) {
                    document.getElementById('register-password-confirm-error').textContent = '两次输入的密码不一致';
                    document.getElementById('register-password-confirm-error').classList.add('show');
                    isValid = false;
                }

                return isValid;
            }

            // 忘记密码表单验证
            function validateForgotPasswordForm() {
                let isValid = true;

                // 重置错误消息
                document.querySelectorAll('#forgot-password-page .error-message').forEach(el => {
                    el.classList.remove('show');
                    el.textContent = '';
                });

                if (!forgotIdCard.value.trim()) {
                    document.getElementById('forgot-id-card-error').textContent = '身份证号不能为空';
                    document.getElementById('forgot-id-card-error').classList.add('show');
                    isValid = false;
                } else if (!/^\d{17}[\dXx]$/.test(forgotIdCard.value.trim())) {
                    document.getElementById('forgot-id-card-error').textContent = '请输入有效的18位身份证号';
                    document.getElementById('forgot-id-card-error').classList.add('show');
                    isValid = false;
                }

                if (!forgotName.value.trim()) {
                    document.getElementById('forgot-name-error').textContent = '姓名不能为空';
                    document.getElementById('forgot-name-error').classList.add('show');
                    isValid = false;
                }

                if (!forgotPhone.value.trim()) {
                    document.getElementById('forgot-phone-error').textContent = '联系电话不能为空';
                    document.getElementById('forgot-phone-error').classList.add('show');
                    isValid = false;
                } else if (!/^1[3-9]\d{9}$/.test(forgotPhone.value.trim())) {
                    document.getElementById('forgot-phone-error').textContent = '请输入有效的11位手机号码';
                    document.getElementById('forgot-phone-error').classList.add('show');
                    isValid = false;
                }

                return isValid;
            }

            function validateNewPasswordForm() {
                let isValid = true;

                if (!forgotNewPassword.value.trim()) {
                    document.getElementById('forgot-new-password-error').textContent = '新密码不能为空';
                    document.getElementById('forgot-new-password-error').classList.add('show');
                    isValid = false;
                } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(forgotNewPassword.value.trim())) {
                    document.getElementById('forgot-new-password-error').textContent = '密码必须包含8位以上，由数字和字母组成';
                    document.getElementById('forgot-new-password-error').classList.add('show');
                    isValid = false;
                }

                if (forgotNewPassword.value.trim() !== forgotConfirmPassword.value.trim()) {
                    document.getElementById('forgot-confirm-password-error').textContent = '两次输入的密码不一致';
                    document.getElementById('forgot-confirm-password-error').classList.add('show');
                    isValid = false;
                }

                return isValid;
            }

            function validateChangePasswordForm() {
                let isValid = true;

                // 重置错误消息
                document.querySelectorAll('#change-password-page .error-message').forEach(el => {
                    el.classList.remove('show');
                    el.textContent = '';
                });

                if (!oldPassword.value.trim()) {
                    document.getElementById('old-password-error').textContent = '旧密码不能为空';
                    document.getElementById('old-password-error').classList.add('show');
                    isValid = false;
                }

                if (!newPassword.value.trim()) {
                    document.getElementById('new-password-error').textContent = '新密码不能为空';
                    document.getElementById('new-password-error').classList.add('show');
                    isValid = false;
                } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(newPassword.value.trim())) {
                    document.getElementById('new-password-error').textContent = '密码必须包含8位以上，由数字和字母组成';
                    document.getElementById('new-password-error').classList.add('show');
                    isValid = false;
                }

                if (newPassword.value.trim() !== newPasswordConfirm.value.trim()) {
                    document.getElementById('new-password-confirm-error').textContent = '两次输入的新密码不一致';
                    document.getElementById('new-password-confirm-error').classList.add('show');
                    isValid = false;
                }

                return isValid;
            }

            // 登录功能
            loginBtn.addEventListener('click', function() {
                if (!validateLoginForm()) return;

                const account = loginAccount.value.trim();
                const password = loginPassword.value.trim();
                const loginTypeValue = loginType.value; // 获取选择的登录类型

                // 检查用户是否存在
                if (!users[account]) {
                    alert('账号不存在，请检查后重试');
                    return;
                }

                const user = users[account];

                // 检查账户是否被锁定
                const now = Date.now();
                if (user.lockedUntil > now) {
                    const remainingTime = Math.ceil((user.lockedUntil - now) / (60 * 60 * 1000));
                    alert(`该账户已被锁定，请${remainingTime}小时后再试`);
                    return;
                }

                // 检查密码
                if (user.password !== password) {
                    // 增加登录尝试次数
                    user.loginAttempts++;

                    if (user.loginAttempts >= 5) {
                        // 锁定账户24小时
                        user.lockedUntil = now + 24 * 60 * 60 * 1000;
                        alert('密码错误次数过多，该账户已被锁定24小时');
                    } else {
                        const attemptsLeft = 5 - user.loginAttempts;
                        alert(`密码错误！您还有 ${attemptsLeft} 次尝试机会`);
                    }

                    return;
                }

                // 检查登录类型是否匹配
                if (loginTypeValue === 'admin' && !user.isAdmin) {
                    alert('您选择的是管理员登录，但该账号不是管理员账号，请选择客户登录');
                    return;
                }

                // 登录成功，使用localStorage存储用户信息
                user.loginAttempts = 0;
                localStorage.setItem('bankingUser', JSON.stringify({
                    account: account,
                    name: user.name || account,
                    customerId: user.customerId,
                    isAdmin: user.isAdmin || false
                }));

                // 根据登录类型跳转到不同页面
                let redirectPage;
                if (loginTypeValue === 'admin') {
                    redirectPage = 'administrator.html'; // 管理员页面
                } else {
                    redirectPage = 'customer.html'; // 客户页面
                }

                // 登录成功，跳转到对应界面
                window.location.href = redirectPage;
            });

            // 注册功能
            registerBtn.addEventListener('click', function() {
                if (!validateRegisterForm()) return;

                const account = registerPhone.value.trim(); // 使用手机号作为默认账号

                // 检查用户是否已存在（通过手机号/身份证号）
                if (users[account] || Object.values(users).some(user => user.idCard === registerIdCard.value.trim())) {
                    alert('该账号或身份证号已被注册，请直接登录');
                    return;
                }

                // 创建新用户
                users[account] = {
                    password: registerPassword.value.trim(),
                    name: registerName.value.trim(),
                    idCard: registerIdCard.value.trim(),
                    phone: registerPhone.value.trim(),
                    address: registerAddress.value.trim() || '',
                    customerId: generateCustomerId(),
                    lockedUntil: 0,
                    loginAttempts: 0
                };

                // 显示客户编号
                customerId.value = users[account].customerId;

                alert('注册成功！您的客户编号为：' + users[account].customerId + '\n请使用账号登录');
                showPage('login-page');

                // 清空表单
                document.getElementById('register-page').querySelectorAll('input').forEach(input => {
                    if (input.id !== 'customer-id') {
                        input.value = '';
                    }
                });
            });

            // 忘记密码功能 - 验证身份
            verifyIdentityBtn.addEventListener('click', function() {
                if (!validateForgotPasswordForm()) return;

                const idCard = forgotIdCard.value.trim();
                const name = forgotName.value.trim();
                const phone = forgotPhone.value.trim();

                // 查找匹配的用户
                let foundUser = null;
                let account = null;

                for (const [key, user] of Object.entries(users)) {
                    if (user.idCard === idCard && user.name === name && user.phone === phone) {
                        foundUser = user;
                        account = key;
                        break;
                    }
                }

                if (!foundUser) {
                    alert('身份验证失败，请检查您输入的信息是否正确');
                    return;
                }

                // 验证成功，显示设置新密码表单
                newPasswordGroup.style.display = 'block';
                confirmPasswordGroup.style.display = 'block';
                resetPasswordBtn.style.display = 'block';

                // 自动聚焦到新密码输入框
                forgotNewPassword.focus();
            });

            // 忘记密码功能 - 重置密码
            resetPasswordBtn.addEventListener('click', function() {
                if (!validateNewPasswordForm()) return;

                const idCard = forgotIdCard.value.trim();
                const name = forgotName.value.trim();
                const phone = forgotPhone.value.trim();

                // 查找匹配的用户
                let account = null;
                for (const [key, user] of Object.entries(users)) {
                    if (user.idCard === idCard && user.name === name && user.phone === phone) {
                        account = key;
                        break;
                    }
                }

                if (!account) {
                    alert('用户信息不匹配，请重新验证身份');
                    return;
                }

                // 更新密码
                users[account].password = forgotNewPassword.value.trim();

                alert('密码重置成功！请使用新密码登录');
                showPage('login-page');

                // 清空表单
                document.getElementById('forgot-password-page').querySelectorAll('input').forEach(input => {
                    input.value = '';
                });

                // 重置表单状态
                newPasswordGroup.style.display = 'none';
                confirmPasswordGroup.style.display = 'none';
                resetPasswordBtn.style.display = 'none';
            });

            // 修改密码功能
            changePasswordBtn.addEventListener('click', function() {
                if (!validateChangePasswordForm()) return;

                const account = loginAccount.value.trim();

                // 检查用户是否存在
                if (!users[account]) {
                    alert('账号不存在，请检查后重试');
                    return;
                }

                // 检查旧密码
                if (users[account].password !== oldPassword.value.trim()) {
                    alert('旧密码不正确，请重新输入');
                    return;
                }

                // 更新密码
                users[account].password = newPassword.value.trim();

                alert('密码修改成功！请使用新密码登录');
                showPage('login-page');

                // 清空表单
                document.getElementById('change-password-page').querySelectorAll('input').forEach(input => {
                    input.value = '';
                });
            });

            // 导航功能
            toRegister.addEventListener('click', function(e) {
                e.preventDefault();
                showPage('register-page');
                customerId.value = generateCustomerId(); // 预生成客户编号
            });

            toForgotPassword.addEventListener('click', function(e) {
                e.preventDefault();
                showPage('forgot-password-page');
            });

            toLoginFromRegister.addEventListener('click', function(e) {
                e.preventDefault();
                showPage('login-page');
            });

            toLoginFromForgot.addEventListener('click', function(e) {
                e.preventDefault();
                showPage('login-page');

                // 重置表单状态
                newPasswordGroup.style.display = 'none';
                confirmPasswordGroup.style.display = 'none';
                resetPasswordBtn.style.display = 'none';
            });

            toLoginFromChange.addEventListener('click', function(e) {
                e.preventDefault();
                showPage('login-page');
            });

            logoutBtn.addEventListener('click', function() {
                showPage('login-page');
            });

            toChangePassword.addEventListener('click', function() {
                if (!loginAccount.value.trim()) {
                    alert('请先登录');
                    showPage('login-page');
                    return;
                }

                showPage('change-password-page');
            });

            // 添加输入框回车事件
            loginPassword.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    loginBtn.click();
                }
            });

            registerPasswordConfirm.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    registerBtn.click();
                }
            });

            forgotPhone.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    verifyIdentityBtn.click();
                }
            });

            forgotConfirmPassword.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    resetPasswordBtn.click();
                }
            });

            newPasswordConfirm.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    changePasswordBtn.click();
                }
            });
        });
    </script>
</body>
</html>